<script lang="ts" setup>
import { computed } from 'vue';
import { Tag } from 'ant-design-vue';
import type { DressStatus, ArtistStatus, OrderStatus } from '#/api/wedding';

const props = defineProps<{
  status: DressStatus | ArtistStatus | OrderStatus | string;
  type?: 'dress' | 'artist' | 'photographer' | 'order';
}>();

const statusConfig = computed(() => {
  const configs: Record<string, { color: string; text: string }> = {
    // 婚纱状态
    AVAILABLE: { color: 'success', text: '可用' },
    RESERVED: { color: 'warning', text: '已预约' },
    RENTED: { color: 'processing', text: '已租出' },
    MAINTENANCE: { color: 'default', text: '维护中' },
    RETIRED: { color: 'error', text: '已下架' },
    
    // 服务人员状态
    BUSY: { color: 'processing', text: '服务中' },
    BOOKED: { color: 'warning', text: '已预约' },
    OFF_DUTY: { color: 'default', text: '休息中' },
    
    // 订单状态
    DRAFT: { color: 'default', text: '草稿' },
    CONFIRMED: { color: 'processing', text: '已确认' },
    PAID: { color: 'success', text: '已支付' },
    IN_PROGRESS: { color: 'warning', text: '进行中' },
    COMPLETED: { color: 'success', text: '已完成' },
    CANCELLED: { color: 'error', text: '已取消' },
  };
  
  return configs[props.status] || { color: 'default', text: props.status };
});
</script>

<template>
  <Tag :color="statusConfig.color">
    {{ statusConfig.text }}
  </Tag>
</template>

